<template>
  <div>
        <h1>父组件</h1>
        <hr>
        <boxOne></boxOne>
       <h1>浅响应：{{myobj.name}}</h1>
       <button @click="ch">改变</button>
  </div>
</template>
<script >
// 在定义 Vue 组件时提供类型推导的辅助函数。 配置项(options)api 更好的支持ts
import {ref,defineComponent,defineAsyncComponent,watchEeffct,watch,onWatcherCleanup,isRef,unref,toValue,isProxy,reactive,shallowRef,triggerRef,toRaw} from 'vue'
    // defineAsyncComponent 异步加载组件的方法 提高性能
    let boxOne=defineAsyncComponent(()=>import("./boxOne.vue"))

  export default defineComponent({
    components:{boxOne},
      setup(props,context){
        let myname=ref("李小龙")
        // watch  newVal oldVal onCleanup 清除监听
     watch(myname, (value, oldValue, onCleanup) => {
        console.log("do something");
        // onCleanup(() => {
        //   console.log("清除了监听");
        // });
        // 
      // onWatcherCleanup 清除监听
         onWatcherCleanup(() => {
          console.log("cleanup");
        });

      });
      // isRef检查某个值是否为 ref。
       console.log(isRef(myname),"-----------")
      // unref 如果参数是 ref，则返回内部值，否则返回参数本身
      let mycity=ref("北京");

      let beijing=unref(mycity)
      console.log(beijing,"--字符串-----")


      // toValue 获取响应式数据的值 和unref 一样
      let  num=toValue(ref(1))  
      console.log(num,"--toValue--")//  --> 1

      // isProxy() 判断一个数据的响应式 是否由proxy完成
      // reactive readonly shallowReactive shallowReadonly
      let state=reactive({
          food:"烧烤，火锅，麻辣烫，麻辣香锅"
      })
      console.log(isProxy(state),"--isProxy--")// true

      // isReactive() 判断一个数据是否由reactive来创建完成的
      // isReadonly()  判断一个数据是否由readonly来创建完成的


      // 
      // shallowRef() 创建一个浅响应式的 ref  性能更好

      let myobj=shallowRef({
        name:"王宝强",
        movice:{
          mname:"天下无贼",
          mtime:{
            t1:'2002',
            t2:'2003'
          }
        }
      })
      // 
      let ch=()=>{
        myobj.value.name="汤唯"
        // triggerRef可以 触发浅响应式数据的更新
        triggerRef(myobj) 

        console.log(   myobj.value,"=============") //。value操作能接受到变化的
      }
    //   shallowReactive()//创建浅响应式数据的reactive
    //   shallowReadonly() //创建浅响应式数据的readonly
    // 
  // toRaw() 类似于toValue  将reactive的对象 原样返回
      let lgd=reactive({
          name:"刘德华",
          age:19
      })

      let fc=toRaw(lgd)
      console.log(fc,"--toRaw--")//  --> {name:"刘德华",age:19}
        return {
          myobj,
          ch
        }
      }
  })
</script>